<template>
  <div class="container">
    <back-page :backType="backType" />
    <van-overlay :show="layerBoolean">
      <get-customer-layer />
    </van-overlay>
    <template v-if="!getCustomerId">
      <get-user-info
        v-if="isGetUserInfo"
        @updateUserInfo="initUserGoods"
        :showBackBtn="true"
        @showPage="showPage"
        @authPhoneInfo="authPhoneInfo"/>
      <get-phone-layer v-if="isGetPhoneLayer" @updatePhoneInfo="initPhoneLayer"/>
    </template>
    <template v-if="getCustomerId && !getPhone">
      <get-phone-layer v-if="isGetPhoneLayer" @updatePhoneInfo="initPhoneLayer"/>
    </template>
    <div ref="top">
      <swiper class="top-swiper" autoplay="true" interval="5000" indicator-color="rgba(255, 255, 255, 0.5)" indicator-active-color="#ff632b"
        duration="1000" indicator-dots="true">
        <template v-if="goods.images">
          <block v-for="(item, index) in goods.images" :key="index">
            <swiper-item>
              <img v-if="item" class="top-img" mode="aspectFill" :src="item" @click="previewImage(item, goods.images)"/>
            </swiper-item>
          </block>
        </template>
      </swiper>
    </div>
    <div class="flex bg-color-white">
      <div class="flex-item">
        <!-- 阶梯价 -->
        <div  v-if="isLadderPrice === 1">
          <swiper class="swiper-price-box" v-if="getCustomerId && getWholesaleAuthority">
            <block v-for="(item, index) of tempLadderPriceList" :key="index">
              <swiper-item class="swiper-price-item" :class="item.length === 3 ? 'flex-style-1':'flex-style-2'">
                <div v-for="(subitem, subindex) of item" :key="subindex">
                  <p>￥<span>{{subitem.ladderPrice}}</span></p>
                  <span style="text-align: left">{{subitem.ladderNum}}个起批</span>
                </div>
              </swiper-item>
            </block>
          </swiper>
          <div v-else style="color:#FF250A;padding-left:20rpx;font-weight:700;font-size:28rpx;padding-top:26rpx;" @click="authInfo" v-text="getCustomerId && getPhone && !getWholesaleAuthority ? '成为批发商后可见价格' : '登录后可见价格'"></div>
        </div>
        <div v-else>
          <!-- 正常价格 -->
          <div class="pad-l-10 pad-r-10">
            <div class="flex v-align-c pad-t-13">
              <div class="flex-item flex-between bg-color-white v-align-b pad-r-6">
                <div class="flex v-align-c line-h-1">
                  <div class="font-red font-24 flex v-align-c">
                    <label v-if="getCustomerId && getWholesaleAuthority">{{ goods.priceRange }}</label>
                    <label v-else style="color:#FF250A;font-weight:700;font-size:28rpx !important;" @click="authInfo"  v-text="getCustomerId && getPhone && !getWholesaleAuthority ? '成为批发商后可见价格' : '登录后可见价格'"></label>
                  </div>
                  <div class="tag-number font-12 pad-l-4 mar-t-2 pad-r-4 pad-t-2 pad-b-2 mar-l-8">{{ goods.wholesaleNum }}{{ goods.unit ? goods.unit : '件' }}起批</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 划线价 -->
          <div class="text-del scribing pad-b-5" v-if="getCustomerId && getWholesaleAuthority">
            <span v-if="goods.minScribingPrice">￥{{goods.minScribingPrice}}</span>
            <span v-if="showAround">
              <span>~</span>
              <span>￥{{goods.maxScribingPrice}}</span>
            </span>
          </div>
        </div>
        <div class="title-top mar-t-4 font-w font-15 pad-l-10 pad-r-10">
          {{ goods.title }}
        </div>
        <!-- 商品标签 -->
        <div v-if="goodsTagList.length" class="height-30 mar-t-6">
          <scroll-view :scroll-x="true" class="horizontal-bar flex ">
            <div class="item-bar flex-item" @click="goSearch(tagitem)" v-for="(tagitem, tagindex) of goods.goodsTagList" :key="tagindex">
              {{tagitem.goodsTagName}}
            </div>
          </scroll-view>
        </div>
        <div v-if="goods.sellPoint" class="font-13 font-color-9 pad-l-10 pad-r-10 mar-t-1">{{ goods.sellPoint }}</div>
        <div class="flex v-align-c pad-t-5 pad-b-17 pad-l-10 pad-r-10">
          <div class="font-12 font-color-9 flex-item" >
            <span>已售{{ goods.salesNum }}{{ goods.unit ? goods.unit : '件' }}</span>
          </div>
          <div class="font-12 font-color-9" v-if="goods.stock > 0">
            <span>仅剩{{ goods.stock }}{{ goods.unit ? goods.unit : '件' }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 跨境发货、税费信息 -->
    <div v-if="goods.crossBorderType === 2" class="cross-boder-inf mar-l--4 mar-r--4">
      <div class="flex v-align-t font-15">
        <div class="font-w mar-r-15">发货</div>
        <img
          v-if="goods.countryNationalFlagUrl"
          class="icon-country-c mar-t-6 mar-r-6"
          mode="widthFix"
          :src="goods.countryNationalFlagUrl"
          alt="">            
        <div class="flex-item">{{ goods.countryName }}丨{{ goods.isIncludeTaxTips }}</div>
      </div>
      <div v-if="goods.comprehensiveTaxAmount * 1 > 0" class="flex v-align-c font-15 pad-t-6">
        <div class="font-w mar-r-15">税费</div>
        <div><span class="font-12 pad-r-4">¥</span>{{ goods.comprehensiveTaxAmount }}</div>
      </div>
    </div>
    <template v-if="goods.goodsParameters">
      <div class="detail mar-t-11 pad-t-15" v-if="goods.goodsParameters.length > 0">
        <div class="detail-text flex v-align-c mar-l-15 mar-r-15">
          <label></label>
          <span class="font-16 mar-l-8">商品参数</span>
        </div>
        <div class="pad-l-28 pad-r-28 font-14 pad-t-5 pad-b-24">
          <div class="mar-t-12 line-h-1 font-color-9" v-for="(item,index) in goods.goodsParameters" :key="index"><span>{{item.parameterName}}</span><span>{{item.parameterValue}}</span></div>
        </div>
      </div>
    </template>
    <template v-if="goods.details">
      <div class="detail mar-t-11 pad-t-15" v-if="goods.details.length > 0">
        <div class="detail-text flex v-align-c mar-l-15 mar-r-15">
          <label></label>
          <span class="font-16 mar-l-8">商品详情</span>
        </div>
        <div class="align-c pad-t-16">
          <show-rich-text :fromGoodsId="goods.goodsId" :content="goods.details" type="shopDetail"></show-rich-text>
        </div>
      </div>
    </template>
    <div class="download-nav box-shadow fixed-btn" v-if="getCustomerId && getWholesaleAuthority">
      <button class="button-icon"
        @click="$pt.navigateTo({url: '/pages/shop/detail/download-img/main?goodsId=' + goods.goodsId})">
        <div class="font-10">
          <img class="width-18 height-18" v-if="fileSpace" mode="widthFix"
              :src="fileSpace + '/images/icon-download-2.png'"/>
          <p>素材</p>
        </div>
      </button>
    </div>
    <div class="height-50"></div>
    <!-- 商品详情购买导航按钮 -->
    <div class="flex bottom-btn">
      <div class="item-bottom flex" v-if="getCustomerId && getWholesaleAuthority">
        <ul class="flex">
          <li @click="backHome">
            <div class="height-21">
              <img v-if="fileSpace" :src="fileSpace + '/images/w-icon-shop-2.png'" alt="" class="icon width-19 height-19" mode="widthFix">
            </div>
            <div class="item-b-txt font-color-6">进店</div>
          </li>
          <li class="pos-rel" @click="customerLayer">
            <button class="contactBtn hidden-submit button-icon"></button>
            <div class="height-21">
              <img v-if="fileSpace" :src="fileSpace + '/images/w-icon-customer-2.png'" alt="" class="icon width-19 height-19" mode="widthFix">
            </div>
            <div class="item-b-txt font-color-6">客服</div>
          </li>
          <li class="pos-rel" v-if="goods.buyFlag===1"  @click="goToCart">
            <div class="height-21">
              <img v-if="fileSpace" :src="fileSpace + '/images/w-icon-cart-2.png'" alt="" class="icon width-19 height-19" mode="widthFix">
            </div>
            <div class="item-b-txt font-color-6">进货单</div>
            <div class="badge">
              <cart-badge ref="cartBadge"></cart-badge>
            </div>
          </li>
        </ul>
        <div class="btn flex line-h-1">
          <span v-show="goods.buyFlag===1" @click="getSkuBuy(true)">加入进货单</span>
          <span v-show="goods.buyFlag===1" @click="getSkuBuy(false)">立即订购</span>
        </div>
      </div>
      <div v-else style="background: linear-gradient(to right, #ff8e4b, #ff4e25);width:100%;height:100%;color:#fff;">
        <span style="display:flex;justify-content:center;align-items:center;width:100%;height:100%;font-weight:700" @click="authInfo" v-if="applyWholesaleAuthority === 1" v-text="getCustomerId && getPhone && !getWholesaleAuthority ? '申请成为批发商' : '登录后可见价格，立即登录'"></span>
        <button style="width:100%;height:100%;border:none;border-radius:0px;color:#fff;background:none;font-weight:700" v-if="applyWholesaleAuthority === 0" size="default" class="font-17" @click="customerLayer">申请成为批发商</button>
      </div>
    </div>
    <!-- 商品已下架 -->
    <div class="shop-null-fixed" v-if="isLowerShelf">
      <div class="shop-null-box" v-if="getCustomerId && getWholesaleAuthority">
        <div class="icon-box" @click="backHome">
          <img v-if="fileSpace" :src="fileSpace + '/images/w-icon-shop-2.png'" alt="" class="icon width-19 height-19" mode="widthFix">
          <div class="item-b-txt font-color-6">进店</div>
        </div>
        <div class="icon-box" @click="customerLayer">
          <img v-if="fileSpace" :src="fileSpace + '/images/w-icon-customer-2.png'" alt="" class="icon width-19 height-19" mode="widthFix">
          <div class="item-b-txt font-color-6">客服</div>
        </div>
        <div class="shop-null font-16 font-w">商品已下架</div>
      </div>
      <div v-else style="background: linear-gradient(to right, #ff8e4b, #ff4e25);width:100%;height:100%;color:#fff;">
        <span style="display:flex;justify-content:center;align-items:center;width:100%;height:100%;font-weight:700" @click="authInfo" v-if="applyWholesaleAuthority === 1" v-text="getCustomerId && getPhone && !getWholesaleAuthority ? '申请成为批发商' : '登录后可见价格，立即登录'"></span>
        <button style="width:100%;height:100%;border:none;border-radius:0px;color:#fff;background:none;font-weight:700" v-if="applyWholesaleAuthority === 0" size="default" class="font-17" @click="customerLayer">申请成为批发商</button>
      </div>
    </div>
    <!--sku选择-->
    <get-sku-buy ref="getSkuBuy" :goodsType="goodsType"
      :goodsData="goods" :skuList="skuList" :tempLadderPriceList="tempLadderPriceList"
      @finished="getSkuBuyFinished"></get-sku-buy>

    <!-- 弹窗 -->
    <div class="self-alert" v-if="showAlert">
      <div class="img-box">
        <img v-if="fileSpace" :src="fileSpace+'/images/warn-01.png'" alt="">
      </div>
      <div class="text-box">
        <span>您已成功申请</span>
        <span>请耐心等待</span>
      </div>
    </div>
  </div>
</template>

<script>
  import GetUserInfo from '@/components/GetUserInfo'
  import GetPhoneLayer from '@/components/GetPhoneLayer'
  import ShowRichText from '@/components/CustomRichText/ShowRichText'
  import BackPage from '@/components/BackPage'
  import CartBadge from '../components/CartBadge'
  import GetSkuBuy from '../components/GetSkuBuy'
  import GetCustomerLayer from '@/components/GetCustomerLayer'
  
  import {
    getUserGoodsByGoodsId,
    getProjectGoodsSkuById
  } from '@/api/shop'
  import {
    updateUpperShelfFlag
  } from '@/api/distribution'
  import { getMemberInfo, getWholesaleAuthority, getByEnterpriseId } from '@/api/home'
  import { shareGoods } from '@/api/accessStat'
  import { setWholesaleAuthority, setApplyWholesaleAuthority, setIsPerfectionInfo } from '@/utils/auth'

  export default {
    components: {
      GetUserInfo,
      GetPhoneLayer,
      GetCustomerLayer,
      ShowRichText,
      CartBadge,
      GetSkuBuy,
      BackPage
    },
    data() {
      return {
        skuBuyType: null,
        getAppInfo: {},
        goods: {
          goodsId: '',
          details: [],
          goodsType: 1,
          goodsStatus: 1
        },
        skuList: [],
        scrollTop: 0,
        isGetUserInfo: false,
        isGetPhoneLayer: false,
        shareMemberId: null,
        memberInfo: {},
        backType: false,
        upperShelfFlag: null,
        goodsType: 0,
        isLowerShelf: false,
        layerBoolean: false,
        isGetLimitInfo: false,
        applyStatus: null,
        limitCount: '',
        downIndex: 0,
        tempLadderPriceList: [], // 批发价 价格列表
        isLadderPrice: false, // 是否是阶梯批发价
        applyWholesaleAuthority: '',
        showAlert: false,
        buyDisabled: true,
        goodsTagList: []
      }
    },
    computed: {
      isIPhoneX() {
        return this.$utils.isIPhoneX()
      },
      showAround() {
        if (!this.goods.minScribingPrice || !this.goods.maxScribingPrice) {
          return false
        }
        if (this.goods.minScribingPrice * 1 < this.goods.maxScribingPrice * 1) {
          return true
        } else {
          return false
        }
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
      this.applyWholesaleAuthority = this.getApplyWholesaleAuthority
      wx.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
      })
    },
    // 页面滚动执行方式
    onPageScroll(event) {
      // 避免页面抖动
      if (this.scrollTop === 0 || event.scrollTop === 0) {
        this.scrollTop = event.scrollTop
      }
    },
    onShow() {
      // 判断是否在预览sku图片
      if (this.$store.state.previewImageFlag) {
        return
      }
      this.initUserGoods()
      this.$utils.setMyId(this.getMemberId)
      this.$root.$mp.appOptions.query = {}
      let queryMemberId = this.getCurrentPage().query.memberId
      if (queryMemberId) {
        this.$utils.setMyId(queryMemberId)
        this.$root.$mp.appOptions.query = {}
      }
      if (this.$pt.getStorageSync('appInfo')) {
        this.getAppInfo = this.$pt.getStorageSync('appInfo')
      }
      this.buyDisabled = true
    },
    onShareAppMessage() {
      // 分享商品埋点
      if (this.getCustomerId) {
        shareGoods(this.getMemberId, this.goods.goodsId)
      }
      return {
        title: this.goods.title,
        imageUrl: this.goods.shareImageUrl || this.goods.images[0],
        path: 'pages/shop/detail/main?memberId=' + this.getMemberId + '&goodsId=' + this.goods.goodsId +
          '&goodsType=' + this.goods.goodsType + '&shareMemberId=' + this.getCustomerId
      }
    },
    onShareTimeline() {
      return {
        title: this.goods.title,
        imageUrl: this.goods.shareImageUrl || this.goods.images[0],
        query: 'memberId=' + this.getMemberId + '&goodsId=' + this.goods.goodsId +
          '&goodsType=' + this.goods.goodsType + '&shareMemberId=' + this.getCustomerId
      }
    },
    methods: {
      authPhoneInfo() {
        this.isGetPhoneLayer = true
      },
      initPhoneLayer() {
        this.isGetPhoneLayer = false
      },
      authInfo() {
        if (!this.getCustomerId) {
          this.isGetUserInfo = false
          setTimeout(() => {
            this.isGetUserInfo = true
          }, 100)
        } else {
          if (!this.getPhone && !this.getWholesaleAuthority) {
            this.isGetPhoneLayer = true
          } else if (this.getPhone && !this.getWholesaleAuthority) {
            if (this.applyStatus === 0) {
              this.showAlert = true
              let that = this
              setTimeout(() => {
                that.showAlert = false
              }, 2000)
            } else {
              this.$pt.navigateTo({ url: '/pages/home/apply-wholesale/main' })
            }
          }
        }
      },
      goSearch(item) {
        this.$pt.navigateTo({url: `/pages/home/search/main?goodsTagId=${item.goodsTagId}&goodsTagName=${item.goodsTagName}`})
      },
      showPage() {
        this.isGetUserInfo = false
      },
      customerLayer() {
        this.layerBoolean = true
      },
      backHome() {
        if (!this.getShowBuyCard) return
        this.$pt.navigateTo({url: '/pages/shop/business-shop/main?enterpriseId=' + this.goods.enterpriseId})
      },
      openLocation() {
        if (this.goods.memberStore.latitude === '' || this.goods.memberStore.longitude === '') {
          return
        }
        this.$pt.openLocation({
          latitude: Number(this.goods.memberStore.latitude),
          longitude: Number(this.goods.memberStore.longitude),
          address: this.goods.memberStore.storeAddress
        })
      },
      // 会员基本信息
      initMemberInfo() {
        getMemberInfo(this.getMemberId).then((response) => {
          if (response.isError) return
          this.memberInfo = response.data
          if (this.memberInfo.nickname) {
            this.memberInfo.nickname = this.$utils.getStrByLens(this.memberInfo.nickname, 16)
            this.$pt.setNavigationBarTitle({
              title: this.memberInfo.nickname + '的店铺'
            })
          } else {
            this.$pt.setNavigationBarTitle({
              title: '店铺详情'
            })
          }
          if (this.getCustomerId) {
            this.authority()
          }
          if (response.data.enterpriseId) {
            this.getByEnterpriseId(response.data.enterpriseId)
          }
        }).catch(() => {
        })
      },
      getByEnterpriseId(enterpriseId) {
        // 获取企业参数配置
        getByEnterpriseId({enterpriseId: enterpriseId}).then(response => {
          if (response.isError) return
          setApplyWholesaleAuthority(response.data.applyWholesaleAuthority)
          // response.data.isOpenWholesaleCompulsoryPerfectionInfo = 1
          if (response.data.isOpenWholesaleCompulsoryPerfectionInfo) {
            setIsPerfectionInfo(response.data.isOpenWholesaleCompulsoryPerfectionInfo)
          } else {
            setIsPerfectionInfo(0)
          }
        }).catch({})
      },
      authority() {
        getWholesaleAuthority(this.getCustomerId).then((response) => {
          if (response.isError) return
          // type 0关闭,没权限； 1开启，有权限
          this.limitCount = String(response.data.totalNum)
          setWholesaleAuthority(response.data.authorityStatus || '')
          if (!response.data.authorityStatus) {
            this.applyStatus = response.data.applyStatus // 0: 申请中 1：显示申请
          }
        }).catch(() => {
        })
      },
      initUserGoods() {
        this.$utils.showToast({
          title: '加载中',
          icon: 'loading'
        })
        setTimeout(() => {
          if (this.getCurrentPage().query.shareMemberId) {
            this.backType = false
          } else {
            this.backType = true
          }
          const goodsId = this.getCurrentPage().query.goodsId
          const goodsType = this.getCurrentPage().query.goodsType
          if (!goodsId) {
            return
          }
          this.goods.goodsId = goodsId
          this.goods.goodsType = goodsType
          let data = {
            goodsId: goodsId,
            goodsType: goodsType,
            memberId: this.getMemberId,
            customerId: this.getCustomerId
          }
          if (!this.getShowBuyCard) {
            data.customerId = this.getMemberId
          }
          getUserGoodsByGoodsId(data).then((response) => {
            if (response.isError) return
            this.$pt.hideToast()
            this.goods = response.data
            this.goodsTagList = this.goods.goodsTagList
            if (this.goods.maxWholesalePrice && this.goods.minWholesalePrice) {
              this.goods.priceRange = '¥' + this.goods.minWholesalePrice + '~¥' + this.goods.maxWholesalePrice
            } else {
              this.goods.priceRange = '¥' + this.goods.wholesalePrice
            }
            this.goodsType = response.data.goodsType
            this.isLadderPrice = response.data.ladderAuth
            let i
            if (response.data.ladderAuth === 1) {
              for (let index in response.data.ladderPriceList) {
                if (index % 3 === 0) {
                  i = parseInt(index / 3)
                  this.tempLadderPriceList[i] = []
                }
                +index === 0 ? this.$set(response.data.ladderPriceList[index], 'isActive', true) : this.$set(response.data.ladderPriceList[index], 'isActive', false)
                this.tempLadderPriceList[i].push(response.data.ladderPriceList[index])
              }
              this.$set(this.goods, 'curGoosLadderPrice', response.data.ladderPriceList[0]['ladderPrice'])
            }
            if (this.goods.wholesaleGoodsStatus !== 1) {
              // 判断商品是否展示下架
              this.isLowerShelf = true
            }
            this.initMemberInfo()
            this.getProjectGoodsSku()
          }).catch(() => {
          })
        }, 800)
      },
      getProjectGoodsSku() {
        getProjectGoodsSkuById({
          goodsId: this.goods.goodsId
        }).then((response) => {
          if (response.isError) return
          this.skuList = response.data
          this.buyDisabled = false
          if (this.goods.ladderAuth === 1) {
            for (let item of this.skuList) {
              item.wholesalePrice = this.goods.ladderPriceList[0]['ladderPrice']
            }
          }
        }).catch(() => {
        })
      },
      previewImage(current, images) {
        this.$pt.previewImage({
          urls: images,
          current: current,
          success: res => {
            this.$store.commit('setPreviewImageFlag', true)
          }
        })
      },
      // initPhoneLayer() {
      //   console.log('3333333333')
      //   this.isGetPhoneLayer = false
      //   if (this.getPhone) {
      //     this.getSkuBuy(this.skuBuyType)
      //   }
      // },
      getSkuBuy(isCart, type) {
        // 商品详情数据完成，在打开sku选择层
        if (this.buyDisabled) return
        // 判断购买商品时，手机号码是否授权获取
        if (this.getShowBuyCard) {
          if (!this.getPhone) {
            this.skuBuyType = isCart
            this.isGetPhoneLayer = true
            return
          } else {
            this.isGetPhoneLayer = false
          }
          if (this.getCustomerId) {
            this.$refs.getSkuBuy.show(this.goods, isCart, type)
          } else {
            this.isGetUserInfo = false
            setTimeout(() => {
              this.isGetUserInfo = true
            }, 100)
          }
        } else {
          if (isCart && !this.getShowBuyCard) return
          this.$refs.getSkuBuy.show(this.goods, isCart, type)
        }
      },
      getSkuBuyFinished() {
        this.$refs.cartBadge.initCount()
      },
      goToCart() {
        if (this.getCustomerId) {
          this.$pt.reLaunch({ url: '/pages/shop/cart/main' })
        } else {
          this.isGetUserInfo = false
          setTimeout(() => {
            this.isGetUserInfo = true
          }, 100)
        }
      },
      goToChat() {
        if (this.getCustomerId) {
          if (this.checkOwner) {
            this.$pt.navigateTo({ url: '/pages/chat/records/main' })
          } else {
            this.$pt.navigateTo({ url: '/pages/chat/main?friendId=' + this.getMemberId })
          }
        } else {
          this.isGetUserInfo = false
          setTimeout(() => {
            this.isGetUserInfo = true
          }, 100)
        }
      },
      selCategory(goodsId) {
        this.$refs.upperCategory.selCategory(goodsId)
      },
      upperGoods(goods) {
        const that = this
        updateUpperShelfFlag({
          memberId: that.getCustomerId,
          goodsId: goods.goodsId,
          upperShelfFlag: 1
        }).then((response) => {
          if (response.isError) return
          that.$utils.showToast({ title: '操作成功' })
          let sellData = []
          let sellList = this.$pt.getStorageSync('sellList')
          if (sellList) {
            sellList.push({ goodsId: goods.goodsId })
            that.$pt.setStorageSync('sellList', sellList)
          } else {
            sellData.push({ goodsId: goods.goodsId })
            that.$pt.setStorageSync('sellList', sellData)
          }
        }).catch(() => {
        })
      },
      pageTo() {
        // 去往企业库
        this.$pt.navigateTo({url: '/pages/personal/distribution/goods/main?enterpriseId=' + this.goods.enterpriseId})
      }
    }
  }
</script>

<style lang="less" scoped>
.container {
  background: #f8f8f8;
  min-height: 100vh;
  .cross-boder-inf{
    background: #fff;
    border-top: #f5f5f5 10px solid;
    padding-bottom: 13px;
    padding-left: 15px;
    padding-right: 10px;
    padding-top: 12px;
  }
  .icon-country-c{
    width: 20px;
    height: unset;
  }
  .download-nav {
    z-index: 80;
    position: fixed;
    bottom: 75px;
    right: 17px;
    background: linear-gradient(90deg, #ff411a, #ff7f09);
    border-radius: 100px;
    width: 48px;
    height: 48px;
    text-align: center;
    img {
      display: inline-block;
      margin: 0 auto;
    }
    .button-icon {
      color: #fff;
      height: 48px;
      line-height: 1.2;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    &.box-shadow {
      box-shadow: 3px 0px 10px rgba(255, 112, 48, 0.3) !important;
    }
  }
  /deep/ .van-transition {
    z-index: 100 !important;
  }
  .tag-number {
    background: #ffeee6;
    color: #fe7329;
    line-height: 1;
    display: inline-block;
  }
  .title-top {
    line-height: 1.5;
  }
}
.download-img {
  position: fixed;
  right: 8px;
  bottom: 64px;
  z-index: 100;
}
.add-b-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 60px;
  box-sizing: border-box;
  padding-top: 8px;
  background: #fff;
  width: 100%;
  button {
    height: 45px;
    line-height: 45px;
    font-size: 16px !important;
    font-weight: bold;
    border: none;
    text-align: center;
    &:after {
      display: none;
    }
    .label-inline {
      display: inline-block;
    }
  }
}
.btn-add-address {
  background-color: #ffffff;
  color: #333333;
  box-shadow: none;
  border: #fdc907 2px solid !important;
  line-height: 42px !important;
}
.btn-from-wechat {
  color: #333333;
  background: linear-gradient(to right, #fed800, #fcc605);
}
.share-b-btn {
  .btn-l {
    margin: 0 10px;
    display: block;
    padding: 10px 0;
    border-radius: 5px;
    text-align: center;
    &.buy-now {
      background: #333333;
      color: #fff;
    }
    &.add-s {
      background: linear-gradient(to right, #f6d923, #fbc408);
      color: #0b0500;
    }
    &.off-s {
      background: #e4e4e4;
      color: #acacac;
    }
  }
}
.font-over {
  color: #333;
}
.font-color-81 {
  color: #818181;
}
.type-10 {
  color: #ffb025;
}
.type-30 {
  color: #ff5900;
}
.contactBtn {
  background-color: transparent;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 999;
}
.detail-text {
  label {
    width: 5px;
    height: 16px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    background: linear-gradient(to bottom, #ff8e4b, #ff4e25);
  }
}
.income-bar {
  color: #ff6600;
  .iconfont {
    color: #666666;
  }
}
.circle-bar {
  background: #fbf3d4;
  border-radius: 100px;
  padding: 2px 0;
  display: inline-block;
  .circle-tag {
    background: #f8c400;
    border-radius: 100px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
  }
  .circle-price {
    display: inline-block;
    vertical-align: middle;
  }
}
.pos-rel {
  position: relative;
}
.share-button {
  width: 54px;
  height: 54px;
  position: fixed;
  bottom: 95px;
  right: 18px;
  z-index: 100;
  background: #52c134;
  color: #ffffff;
  border-radius: 100px;
  font-size: 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
  image {
    display: inline-block;
    margin-top: 9px;
  }
}
.top-swiper {
  width: 375px;
  height: 375px;
}

.top-img {
  width: 375px;
  height: 375px;
}

.detail {
  background-color: #fff;
  // min-height: 300px;
  // padding: 10px 0;
}
.store-detail {
  min-height: 50px;
  text-align: left;
  font-size: 14px;
  color: #666;
  padding: 20px 10px 13px;
  .flex-item {
    width: 225px;
  }
}

.detail-online > span {
  font-weight: bold;
}

.detail-online > div {
  background-color: #f8c400;
  height: 3px;
}

.detail-offline > span {
  color: gray;
}

.detail-offline > div {
  height: 3px;
}

.bottom-btn {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  align-items: center;
  justify-content: center;
  .item-bottom {
    width: 348px;
    height: 100%;
    justify-content: space-between;
    align-items: center;
    .btn {
      width: 215px;
      overflow: hidden;
      height: 40px;
      border-radius: 0;
      span {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        font-size: 14px;
        color: #fff;
        background: linear-gradient(to right, #ff8e4b, #ff4e25);
        cursor: pointer;
        border-radius: 10em;
        &:first-child {
          background: #ffd8d2;
          color: #ff4e23;
          margin-right: 13px;
        }
      }
      .shop-now {
        flex-direction: column;
        .self-shop {
          font-size: 8px;
          .price {
            display: unset;
            background: unset;
            color: #ff001d;
            font-size: 8px;
          }
        }
      }
    }
    ul {
      justify-content: space-between;
      width: 118.5px;
      align-items: center;
      position: relative;
      li {
        font-size: 10px;
        color: #333333;
        text-align: center;
        .icon {
          display: inline-block;
          margin: 0 auto;
        }
      }
    }
  }
}
.item-b-txt {
  font-size: 10px;
  display: block;
  margin-top: -2px;
  overflow: hidden;
}
.store-btn {
  background: #ffc808;
  color: white;
  height: 22px;
  line-height: 22px;
  border-radius: 3px;
}
.buy {
  width: 28%;
  color: #fff;
  background-color: red;
}

.cart {
  width: 28%;
  color: #fff;
  background-color: #fe976a;
}

.div-share {
  width: 100%;
  height: 130px;
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 100;
  border-radius: 15px 15px 0 0;
  .cross-btn {
    position: absolute;
    top: 16px;
    right: 16px;
  }
}

.share-btn {
  width: 70px;
  height: 70px;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -35px;
  // background: rgba(0,0,0,0.3);
  background: none;
}

.share-btn:after {
  border: none;
}

.create-poster {
  background-color: #fff;
  width: 239px;
  height: 432px;
  margin-top: -53px;
}

.share-canvas {
  width: 239px;
  height: 432px;
  background-color: #fff;
}

.close-btn {
  position: absolute;
  margin-top: -265px;
  right: 30px;
}
.badge {
  position: absolute;
  right: 0;
  top: -3px;
  z-index: 101;
  zoom: 0.9;
}

.btn-upper {
  width: 100%;
  height: 35px;
  position: fixed;
  bottom: 0;
  background-color: #f8c400;
  font-size: 16px;
  padding-top: 10px;
  &.un-buy {
    color: #4e4e4e;
    background-color: #c5c5c5;
  }
}

.get-category {
  width: 375px;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 990;
}

.bg-confirm {
  background-color: #f8c400;
}

.div-income {
  border-radius: 5px;
  background-color: #fbf2d4;
  font-size: 12px;
  padding-top: 2px;
  padding-left: 10px;
  padding-right: 10px;
  width: 110px;
}

.explain-popup {
  .popup-item {
    width: 290px;
    height: 430px;
    position: relative;
    background-color: #fff;
    border-radius: 8px;
    .title {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: #333333;
    }
    .centent {
      position: absolute;
      top: 60px;
      right: 20px;
      left: 20px;
      bottom: 75px;
      overflow-x: hidden;
      overflow-y: auto;
      h5 {
        font-weight: bold;
        font-size: 14px;
        color: #5a5a5a;
      }
      p {
        font-size: 14px;
        color: #5a5a5a;
      }
    }
    .btn {
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      height: 75px;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        height: 41px;
        width: 250px;
        background: #fdc907;
        border-radius: 100px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: #333333;
      }
    }
  }
}
.line-h-1 {
  line-height: 1;
}
.self-buy {
  height: 19px;
  text-align: center;
  display: flex;
  justify-content: left;
  align-items: center;
  font-size: 12px;
  .self-buy-left {
    background: #ffe200;
    color: #333;
    padding: 0 5px;
  }
  .self-buy-right {
    background: #000000;
    color: #fff;
    padding: 0 5px;
  }
}
.wechat-box {
  padding-bottom: 32px;
  .wechat-group {
    border-radius: 3px;
    box-shadow: 0px 4px 9px #ededed;
  }
}
.seckill-box {
  height: 53px;
  padding: 0 10px;
  background-size: 375px 53px;
  background-repeat: no-repeat;
  .count-down-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    .count-down {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .square-block {
        min-width: 12px;
        font-size: 10px;
        display: inline-block;
        background: #ffe200;
        border-radius: 3px;
        line-height: 1;
        text-align: center;
        padding: 4px 2px;
      }
    }
  }
  .self-shop {
    line-height: 1;
    padding: 3px 11px;
    font-size: 11px;
    border-radius: 0 12px 0 12px;
    background: #000000;
  }
}
.save-img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 53px;
  text-align: center;
  button {
    height: 53px;
    line-height: 53px;
    border-radius: unset;
    padding: unset;
    color: #333;
    font-size: 25px;
    background-color: #ffe200;
  }
}
.add-group-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  .add-group-main {
    width: 323px;
    // height: 446px;
    border-radius: 15px;
    background: white;
    .main-title {
      height: 39px;
      border-radius: 15px 15px 0 0;
      font-size: 18px;
      line-height: 39px;
      text-align: center;
      background: #ffe200;
    }
    .main-plan-1 {
      width: 249px;
      height: 251px;
      background: #fff9cc;
      border-radius: 15px;
      margin: 11px auto 0;
      padding: 9px 16px 0;
      .paln-1 {
        position: relative;
        color: #666666;
        font-size: 12px;
        line-height: 24px;
        .font-blue {
          color: #3878ff;
          position: absolute;
          right: 2px;
        }
      }
      .qr-code {
        .qr-code-canvas {
          width: 130px;
          height: 130px;
        }
      }
    }
    .main-plan-2 {
      width: 249px;
      height: 55px;
      line-height: 24px;
      background: #fff9cc;
      border-radius: 15px;
      margin: 11px auto 0;
      padding: 9px 16px 0;
      font-size: 12px;
      .font-blue {
        color: #3878ff;
      }
    }
    .online-service {
      border-radius: 25px;
      height: 40px;
      width: 281px;
      background: #ffe200;
      font-size: 19px;
      line-height: 40px;
      padding: 0;
      text-align: center;
      &::after {
        border: unset;
      }
    }
  }
  .cross-btn {
    width: 35px;
    height: 35px;
    background: #dadada;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
    /deep/ .van-icon {
      display: block;
    }
  }
}
.count-down-fixed {
  height: 53px;
  width: 100%;
  background: #ffe200;
  position: fixed;
  bottom: 0;
  left: 0;
  .count-down-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 5px;
    line-height: 1.4;
  }
}
.shop-null-fixed {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 50px;
  background: white;
  width: 100%;
  .shop-null-box {
    display: flex;
    align-items: center;
    padding-left: 2px;
    .icon-box {
      text-align: center;
      width: 49px;
      height: 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .icon {
        display: block;
        margin: 0 auto;
      }
      .item-b-txt {
        margin-top: 0px !important;
      }
    }
    .shop-null {
      width: calc(100% - 50px);
      background: #b6b6b6;
      color: #fff;
      height: 50px;
      text-align: center;
      line-height: 50px;
    }
  }
}
.scribing {
  font-size: 12px;
  color: #999999;
  padding-left: 10px;
}
.distribution-bottom {
  padding: 0 10px;
  height: 50px;
  border-top: 1px solid #e5e5e5;
  position: fixed;
  bottom: 0;
  left: 0;
  width: calc(100% - 20px);
  background-color: #fff;
  .btn {
    width: 145px;
    height: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-size: 15px;
  }
  .btn-box {
    width: 100%;
    .buy-btn {
      line-height: 1;
      background-color: #ffe200;
    }
    .up-btn {
      background-color: #333;
      color: white;
    }
    .up-btn-over {
      background-color: #dadada;
    }
  }
}
.swiper-price-box {
  height: 140rpx;
  background: #fff;
  padding-left: 20rpx;
  padding-right: 20rpx;
  box-sizing: border-box;
  .flex-style-1 {
    display: flex;
    justify-content: space-between;
  }
  .flex-style-2 {
    display: flex;
    & > div:nth-child(2) {
      margin-left: 130rpx;
    }
  }
  .swiper-price-item {
    & > div {
      display: flex;
      justify-content: center;
      flex-direction: column;
      height: 100%;
      p {
        color: #ff5540;
        font-size: 24rpx;
        span {
          font-size: 48rpx;
        }
      }
      & > span {
        color: #666666;
        font-size: 24rpx;
        margin-top: -12rpx;
      }
    }
  }
}
.self-alert {
  position: fixed;
  width: 24%;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10rpx;
  height: 180rpx;
  padding: 20rpx;
  color: #fff;
  left: 50%;
  top: 50%;
  margin-left: -12%;
  margin-top: -90rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: all 0.3s;
  font-size: 28rpx;
  .img-box {
    img{
      width: 60rpx;
      height: 60rpx;
    }
  }
  .text-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
.horizontal-bar {
      width: 100%;
      white-space: nowrap;
      overflow-x: scroll;
      position: absolute;
      left: 0;
      z-index: 1;
      &:after{
        content: '';
        display: block;
        clear: both;
        font-size: 0;
      }
      .item-bar {
        display: inline-block;
        width: auto;
        font-size: 14px;
        color: #999;
        text-align: center;
        overflow: hidden;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding-left: 2px;
        padding-right: 2px;
        margin-left: 10px;
      }
    }
</style>
